import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col, Card, Form, Button, DatePicker } from 'antd';
import StandardTable from 'components/StandardTable';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

import styles from './DevTask.less';

const { RangePicker } = DatePicker;
const FormItem = Form.Item;

@connect(({ devtest, loading }) => ({
  devtest,
  loading: loading.models.devtest,
}))
@Form.create()
export default class DevTask extends PureComponent {
  state = {
    selectedRows: [],
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'devtest/fetch',
    });
  }

  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const { dispatch } = this.props;
    const params = {
      page: pagination.current,
      pageSize: pagination.pageSize,
    };
    if (sorter.field) {
      params.sorter = `${sorter.field}_${sorter.order}`;
    }

    dispatch({
      type: 'devtest/fetch',
      payload: params,
    });
  };

  handleFormReset = () => {
    const { form, dispatch } = this.props;
    form.resetFields();
    dispatch({
      type: 'devtest/fetch',
      payload: {},
    });
  };

  handleSearch = e => {
    e.preventDefault();

    const { dispatch, form } = this.props;

    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const { date } = fieldsValue;
      let values = {};
      if (date && date.length > 0) {
        const startSubDate = date[0].format('YYYY-MM-DD');
        const endSubDate = date[1].format('YYYY-MM-DD');
        values = {
          ...values,
          startSubDate,
          endSubDate,
        };
      }
      //console.log('values', values);
      dispatch({
        type: 'devtest/fetch',
        payload: values,
      });
    });
  };

  renderSimpleForm() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="时间范围">
              {getFieldDecorator('date')(
                <RangePicker
                  showTime={{ format: 'HH:mm' }}
                  format="YYYY-MM-DD HH:mm"
                  placeholder={['Start Time', 'End Time']}
                  // onChange={onChange}
                  // onOk={onOk}
                  style={{ width: '100%' }}
                />
              )}
            </FormItem>
          </Col>
          <Col md={6} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  render() {
    //console.log('task', this.props.devtest);
    const { devtest, loading } = this.props;
    const { selectedRows } = this.state;
    const columns = [
      {
        title: '测试时间',
        dataIndex: 'testDate',
      },
      {
        title: '设备ID',
        dataIndex: 'devId',
      },
      {
        title: '报告名称',
        dataIndex: 'repName',
      },
      {
        title: '操作',
        render: (value, record) => <a href={record.repUrl}>下载</a>,
      },
    ];

    return (
      <PageHeaderLayout title="任务查询">
        <Card bordered={false}>
          <div className={styles.tableList}>
            <div className={styles.tableListForm}>{this.renderSimpleForm()}</div>
            <StandardTable
              rowKey="setId"
              selectedRows={selectedRows}
              loading={loading}
              data={devtest}
              columns={columns}
              onChange={this.handleStandardTableChange}
            />
          </div>
        </Card>
      </PageHeaderLayout>
    );
  }
}
